
<html lang='zh-CN'>
<head>
    <meta charset='UTF-8' />
    <meta name='viewport' content='width=device-width, initial-scale=1.0' />
    <style>
        .preview-suitable-app {
            overflow: visible;
            height: calc(100% - 20px);
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .app-border {
            transform-origin: center;
            position: relative;
            border-radius: 30px 30px 30px 30px;
        }
        .app-border::after {
            content: '';
            position: absolute;
            top: -4px;
            left: -4px;
            width: 100%;
            height: 100%;
            pointer-events: none;
            border: 4px solid rgb(51, 51, 51);
            border-radius: 30px 30px 30px 30px;
        }
        iframe {
            transform-origin: left top;
            border-radius: 26px;
            overflow: hidden;
        }
        .app-border-right {
            position: absolute;
            top: 259px;
            right: -15px;
        }
        .app-border-footer {
            width: 395px;
            height: 38px;
            position: absolute;
            bottom: 8px;
            left: -1px;
            border-radius: 0 0 16px 16px;
        }
        ::-webkit-scrollbar {
            width: 0px;
            background: #f1f1f1;
        }
    </style>
</head>
<body>
    <div id="preview-suitable-content-app" class="preview-suitable-app">
        <div class="app-border" style="width: 393px;height: 852px;transform:scale(0.9002347417840375);">
            <iframe id="iframe" class="vueIframeApp" style="border:none;width: 100%;height: 100%;"></iframe>
        </div>
    </div>
</body>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const html = "<html lang=\"zh-CN\">\n <head>\n  <meta charset=\"utf-8\"/>\n  <meta content=\"width=device-width, initial-scale=1.0\" name=\"viewport\"/>\n  <title>\n   个人中心\n  </title>\n  <script src=\"https://res.gemcoder.com/js/reload.js\">\n  <\/script>\n  <script src=\"https://cdn.tailwindcss.com\">\n  <\/script>\n  <link href=\"https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css\" rel=\"stylesheet\"/>\n  <script>\n   tailwind.config = {\n  theme: {\n    extend: {\n      colors: {\n        primary: '#FF3B30',\n        secondary: '#34C759',\n        neutral: {\n          100: '#F5F7FA',\n          200: '#E4E7ED',\n          300: '#C0C6CF',\n          400: '#909399',\n          500: '#606266',\n          600: '#303133'\n        }\n      },\n      fontFamily: {\n        inter: ['Inter', 'system-ui', 'sans-serif']\n      },\n      boxShadow: {\n        'card': '0 4px 20px rgba(0, 0, 0, 0.08)',\n        'button': '0 4px 12px rgba(255, 59, 48, 0.3)'\n      }\n    }\n  }\n};\n  <\/script>\n  <style type=\"text/tailwindcss\">\n   @layer utilities {\n            .content-auto {\n                content-visibility: auto;\n            }\n            .text-shadow {\n                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n            }\n            .transition-custom {\n                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n            }\n            .bg-gradient-primary {\n                background: linear-gradient(135deg, #FF3B30 0%, #FF9500 100%);\n            }\n        }\n  </style>\n \n        <style>\n            ::-webkit-scrollbar { width: 0px; }\n        </style>\n    </head>\n <body class=\"bg-neutral-100 font-inter text-neutral-600 min-h-screen\">\n  <!-- 顶部导航栏 -->\n  <header class=\"sticky top-0 z-50 bg-white/80 backdrop-blur-md shadow-sm\">\n   <div class=\"container mx-auto px-4 py-3 flex items-center justify-between\">\n    <button class=\"text-neutral-500 hover:text-primary transition-custom\">\n     <i class=\"fas fa-arrow-left text-xl\">\n     </i>\n    </button>\n    <h1 class=\"text-[clamp(1.25rem,5vw,1.5rem)] font-bold text-neutral-600\">\n     个人中心\n    </h1>\n    <button class=\"text-neutral-500 hover:text-primary transition-custom\">\n    </button>\n   </div>\n  </header>\n  <main class=\"container mx-auto px-4 py-4\">\n   <!-- 个人资料卡片 -->\n   <section class=\"bg-white rounded-2xl shadow-card p-4 mb-4 transform hover:shadow-lg transition-custom\">\n    <div class=\"flex flex-col items-center\">\n     <!-- 头像区域 -->\n<div class=\"relative mb-2\">\n        <div class=\"w-20 h-20 rounded-full overflow-hidden border-4 border-white shadow-lg mb-1\">\n         <img alt=\"用户头像\" class=\"w-full h-full object-cover\" src=\"https://design.gemcoder.com/staticResource/echoAiSystemImages/03e771760b2f6fcf916e5d28ba0fd3e6.png\"/>\n        </div>\n      <button class=\"absolute bottom-0 right-0 bg-primary text-white rounded-full p-2 shadow-button transform hover:scale-110 transition-custom\" id=\"changeAvatarBtn\">\n       <i class=\"fas fa-camera\">\n       </i>\n      </button>\n     </div>\n     <!-- 用户名 -->\n     <h2 class=\"text-[clamp(1.25rem,5vw,1.5rem)] font-bold text-neutral-600 mb-1\">\n      用户名\n     </h2>\n     <p class=\"text-neutral-400 text-sm mb-4\">\n      点击编辑个人信息\n     </p>\n     <!-- 个人标签 -->\n     <div class=\"flex flex-wrap justify-center gap-2 mb-6\">\n     </div>\n     <!-- 统计数据 -->\n     <div class=\"grid grid-cols-3 gap-4 w-full text-center\">\n     </div>\n    </div>\n   </section>\n   <!-- 个人信息编辑 -->\n   <section class=\"bg-white rounded-2xl shadow-card p-4 mb-4\">\n    <h2 class=\"text-lg font-bold text-neutral-600 mb-6 flex items-center\">\n     <i class=\"fas fa-user-edit text-primary mr-2\">\n     </i>\n     个人信息\n    </h2>\n    <form class=\"space-y-5\" id=\"profileForm\">\n     <!-- 用户名输入框 -->\n     <div class=\"relative\">\n      <label class=\"block text-sm font-medium text-neutral-500 mb-1\">\n       用户名\n      </label>\n      <div class=\"relative\">\n       <span class=\"absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-400\">\n        <i class=\"fas fa-user\">\n        </i>\n       </span>\n       <input class=\"w-full pl-10 pr-4 py-3 rounded-xl border border-neutral-200 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-custom\" placeholder=\"请输入用户名\" type=\"text\"/>\n      </div>\n     </div>\n     <!-- 邮箱输入框 -->\n     <div class=\"relative\">\n      <label class=\"block text-sm font-medium text-neutral-500 mb-1\">\n       绑定邮箱\n      </label>\n      <div class=\"relative\">\n       <span class=\"absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-400\">\n        <i class=\"fas fa-envelope\">\n        </i>\n       </span>\n       <input class=\"w-full pl-10 pr-4 py-3 rounded-xl border border-neutral-200 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-custom\" placeholder=\"请输入邮箱\" type=\"email\"/>\n      </div>\n     </div>\n     <!-- 密码输入框 -->\n     <div class=\"relative\">\n      <label class=\"block text-sm font-medium text-neutral-500 mb-1\">\n       密码\n      </label>\n      <div class=\"relative\">\n       <span class=\"absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-400\">\n        <i class=\"fas fa-lock\">\n        </i>\n       </span>\n       <input class=\"w-full pl-10 pr-10 py-3 rounded-xl border border-neutral-200 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-custom\" placeholder=\"请输入密码\" type=\"password\"/>\n       <button class=\"absolute inset-y-0 right-0 flex items-center pr-3 text-neutral-400 toggle-password\" type=\"button\">\n        <i class=\"fas fa-eye-slash\">\n        </i>\n       </button>\n      </div>\n     </div>\n     <!-- 确认密码输入框 -->\n     <div class=\"relative\">\n      <label class=\"block text-sm font-medium text-neutral-500 mb-1\">\n       确认密码\n      </label>\n      <div class=\"relative\">\n       <span class=\"absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-400\">\n        <i class=\"fas fa-lock\">\n        </i>\n       </span>\n       <input class=\"w-full pl-10 pr-10 py-3 rounded-xl border border-neutral-200 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-custom\" placeholder=\"请确认密码\" type=\"password\"/>\n       <button class=\"absolute inset-y-0 right-0 flex items-center pr-3 text-neutral-400 toggle-password\" type=\"button\">\n        <i class=\"fas fa-eye-slash\">\n        </i>\n       </button>\n      </div>\n     </div>\n     <!-- 保存按钮 -->\n     <button class=\"w-full bg-gradient-primary text-white font-medium py-3 px-4 rounded-xl shadow-button transform hover:translate-y-[-2px] transition-custom\" type=\"submit\">\n      保存\n     </button>\n    </form>\n   </section>\n   <!-- 退出登录按钮 -->\n   <button class=\"w-full bg-white text-primary border border-primary font-medium py-3 px-4 rounded-xl shadow-sm hover:bg-primary/5 transition-custom mb-6\" id=\"logoutBtn\">\n    退出登录\n   </button>\n  </main>\n  <!-- 头像上传模态框 -->\n  <div class=\"fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden\" id=\"avatarModal\">\n   <div class=\"bg-white rounded-2xl w-full max-w-md mx-4 transform transition-all scale-95 opacity-0\" id=\"modalContent\">\n    <div class=\"p-6\">\n     <div class=\"flex justify-between items-center mb-4\">\n      <h3 class=\"text-lg font-bold text-neutral-600\">\n       更换头像\n      </h3>\n      <button class=\"text-neutral-400 hover:text-neutral-600\" id=\"closeModalBtn\">\n       <i class=\"fas fa-times\">\n       </i>\n      </button>\n     </div>\n     <div class=\"text-center mb-6\">\n      <div class=\"w-32 h-32 rounded-full overflow-hidden border-2 border-neutral-200 mx-auto mb-4\">\n       <img alt=\"预览头像\" class=\"w-full h-full object-cover\" id=\"previewAvatar\" src=\"https://design.gemcoder.com/staticResource/echoAiSystemImages/4e0f9de084307f117acfcd2f3add235b.png\"/>\n      </div>\n      <p class=\"text-neutral-400 text-sm\">\n       点击下方按钮选择图片\n      </p>\n     </div>\n     <div class=\"space-y-3\">\n      <label class=\"block w-full bg-neutral-100 text-neutral-600 font-medium py-3 px-4 rounded-xl text-center cursor-pointer hover:bg-neutral-200 transition-custom\">\n       <i class=\"fas fa-image mr-2\">\n       </i>\n       从相册选择\n       <input accept=\"image/*\" class=\"hidden\" id=\"avatarInput\" type=\"file\"/>\n      </label>\n      <button class=\"w-full bg-primary text-white font-medium py-3 px-4 rounded-xl shadow-button hover:bg-primary/90 transition-custom\">\n       确认更换\n      </button>\n     </div>\n    </div>\n   </div>\n  </div>\n  <script>\n   // 页面加载时初始化\ndocument.addEventListener('DOMContentLoaded', function () {\n  // 获取DOM元素\n  var changeAvatarBtn = document.getElementById('changeAvatarBtn');\n  var avatarModal = document.getElementById('avatarModal');\n  var modalContent = document.getElementById('modalContent');\n  var closeModalBtn = document.getElementById('closeModalBtn');\n  var avatarInput = document.getElementById('avatarInput');\n  var previewAvatar = document.getElementById('previewAvatar');\n  var logoutBtn = document.getElementById('logoutBtn');\n  var passwordToggles = document.querySelectorAll('.toggle-password');\n  var profileForm = document.getElementById('profileForm');\n  // 打开头像上传模态框\n  changeAvatarBtn.addEventListener('click', function () {\n    avatarModal.classList.remove('hidden');\n    // 添加动画效果\n    setTimeout(function () {\n      modalContent.classList.remove('scale-95', 'opacity-0');\n      modalContent.classList.add('scale-100', 'opacity-100');\n    }, 10);\n  });\n  // 关闭头像上传模态框\n  function closeModal() {\n    modalContent.classList.remove('scale-100', 'opacity-100');\n    modalContent.classList.add('scale-95', 'opacity-0');\n    setTimeout(function () {\n      avatarModal.classList.add('hidden');\n    }, 300);\n  }\n  closeModalBtn.addEventListener('click', closeModal);\n  avatarModal.addEventListener('click', function (e) {\n    if (e.target === avatarModal) {\n      closeModal();\n    }\n  });\n  // 头像预览\n  avatarInput.addEventListener('change', function (e) {\n    var file = e.target.files[0];\n    if (file) {\n      var reader = new FileReader();\n      reader.onload = function (event) {\n        previewAvatar.src = event.target.result;\n      };\n      reader.readAsDataURL(file);\n    }\n  });\n  // 密码显示/隐藏切换\n  passwordToggles.forEach(function (toggle) {\n    toggle.addEventListener('click', function () {\n      var input = toggle.previousElementSibling;\n      var icon = toggle.querySelector('i');\n      if (input.type === 'password') {\n        input.type = 'text';\n        icon.classList.remove('fa-eye-slash');\n        icon.classList.add('fa-eye');\n      } else {\n        input.type = 'password';\n        icon.classList.remove('fa-eye');\n        icon.classList.add('fa-eye-slash');\n      }\n    });\n  });\n  // 表单提交\n  profileForm.addEventListener('submit', function (e) {\n    e.preventDefault();\n    // 模拟表单提交\n    alert('信息保存成功！');\n  });\n  // 退出登录\n  logoutBtn.addEventListener('click', function () {\n    if (confirm('确定要退出登录吗？')) {\n      alert('退出登录成功！');\n    }\n  });\n  // 添加页面滚动效果\n  var header = document.querySelector('header');\n  window.addEventListener('scroll', function () {\n    if (window.scrollY > 20) {\n      header.classList.add('shadow-md');\n      header.classList.remove('shadow-sm');\n    } else {\n      header.classList.remove('shadow-md');\n      header.classList.add('shadow-sm');\n    }\n  });\n});\n  <\/script>\n </body>\n</html>\n";
        iframe.srcdoc = html;
    });
</script>
</html>
